﻿<!DOCTYPE html>
<!--承包商违章台账编辑-->
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="/static/js/common.js"></script>
    <link href="/static/js/vue-treeselect/vue-treeselect.css" rel="stylesheet" />
    <script src="/static/js/vue-treeselect/vue-treeselect.js"></script>
</head>
<body>
    <div id="app" v-cloak class="popupW100">
        <el-form label-position="right" :model="Form" status-icon :rules="rules" ref="ruleForm" label-width="100px"
                 size="mini">
            <el-row>
                <el-col :span="24">
                    <div class="elst-select-mini">
                        <el-form-item prop="cbsListId">
                            <el-input size="mini">
                                <template slot="prepend">
                                    {{ContractorPersonnelDirectory.ContractorName+mark.m}}
                                </template>
                                <el-select @visible-change="visibleChange" v-model="Form.cbs_breakrules.cbsListId" slot="suffix"
                                           :placeholder="ContractorPersonnelDirectory.ContractorName" @change="postChange">
                                    <el-option label="请选择" value=""></el-option>
                                    <el-option v-for="item in CBS_List" :label="item.contractorName" :value="item.id">
                                    </el-option>
                                </el-select>
                            </el-input>
                            <span class="iputLineMust" v-if="!Form.cbs_breakrules.cbsListId">
                                <!--必填项添加-->
                                <img src="/static/images/exclamation.png" alt="">
                            </span>
                        </el-form-item>
                    </div>
                </el-col>
                <!--<el-col :span="1" :offset="1">
            <el-button type="primary" @click="ContractorInput('tj')">{{col.Choose}}</el-button>
        </el-col>-->
                <el-col :span="11">
                    <div class="elst-select-mini">
                        <el-form-item prop="violatorsID">
                            <el-input size="mini">
                                <template slot="prepend">
                                    {{ContractorViolationAccount.Violators+mark.m}}
                                </template>
                                <el-select @visible-change="visibleChange" v-model="Form.cbs_breakrules.violatorsID" slot="suffix"
                                           :placeholder="ContractorViolationAccount.Violators">
                                    <el-option label="请选择" value=""></el-option>
                                    <el-option v-for="item in CBS_User" :label="item.personnelName" :value="item.id">
                                    </el-option>
                                </el-select>
                            </el-input>
                            <span class="iputLineMust" v-if="!Form.cbs_breakrules.violatorsID">
                                <!--必填项添加-->
                                <img src="/static/images/exclamation.png" alt="">
                            </span>
                        </el-form-item>
                    </div>
                </el-col>
                <el-col :span="11" :offset="2">
                    <el-form-item prop="violationDate">
                        <div class="elst-select-mini" style="margin-left: 0px;">
                            <el-input size="mini">
                                <template slot="prepend">
                                    {{ContractorViolationAccount.ViolationDate+mark.m}}
                                </template>
                                <el-date-picker slot="suffix" v-model="Form.cbs_breakrules.violationDate" type="date" size="mini"
                                                format="yyyy-MM-dd" value-format="yyyy-MM-dd" placeholder="选择时间">
                                </el-date-picker>
                            </el-input>
                            <span class="iputLineMust" v-if="!Form.cbs_breakrules.violationDate">
                                <!--必填项添加-->
                                <img src="/static/images/exclamation.png" alt="">
                            </span>
                        </div>
                    </el-form-item>
                </el-col>
                <el-col :span="11">
                    <div class="elst-select-mini vue-treeselect_style">
                        <el-form-item prop="discoveringPeopleID">
                            <el-input size="mini">
                                <template slot="prepend">
                                    {{ContractorViolationAccount.DiscoveringPeople+mark.m}}
                                </template>
                                <tree-department-staff-single slot="suffix" v-model="Form.cbs_breakrules.discoveringPeopleID" style="line-height:28px;"></tree-department-staff-single>
                            </el-input>
                            <span class="iputLineMust" v-if="!Form.cbs_breakrules.discoveringPeopleID">
                                <img src="/static/images/exclamation.png" alt="">
                            </span>
                        </el-form-item>
                    </div>
                </el-col>
                <el-col :span="11" :offset="2">
                    <div class="elst-select-mini">
                        <el-form-item prop="areaID">
                            <el-input size="mini">
                                <template slot="prepend">
                                    {{ContractorViolationAccount.FoundArea+mark.m}}
                                </template>
                                <treeselect v-model="Form.cbs_breakrules.areaID" :options="AreaList" :flat="true" slot="suffix"
                                            style="line-height: 28px;width:70%;" :disable-branch-nodes="true"
                                            placeholder="请选择区域" />
                            </el-input>
                            <span class="iputLineMust" v-if="!Form.cbs_breakrules.areaID">
                                <!--必填项添加-->
                                <img src="/static/images/exclamation.png" alt="">
                            </span>
                        </el-form-item>
                    </div>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <div class="elst-select-mini">
                        <el-form-item prop="violationClause">
                            <el-input type="text" v-model="Form.cbs_breakrules.violationClause" autocomplete="off" size="mini">
                                <template slot="prepend">
                                    {{ContractorViolationAccount.ViolationClause+mark.m}}
                                </template>
                            </el-input>
                            <span class="iputLineMust" v-if="!Form.cbs_breakrules.violationClause">
                                <!--必填项添加-->
                                <img src="/static/images/exclamation.png" alt="">
                            </span>
                        </el-form-item>
                    </div>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <div class="elst-select-mini">
                        <el-form-item>
                            <div class="el-input--mini el-input-group">
                                <div class="el-input-group__prepend">
                                    {{ContractorViolationAccount.ViolationInstructions+mark.m}}
                                </div>
                                <el-input class="el-textarea__inner" type="textarea"
                                          v-model="Form.cbs_breakrules.violationInstructions" autocomplete="off"></el-input>
                            </div>
                        </el-form-item>
                    </div>
                </el-col>
                <el-col :span="24">
                    <div class="elst-select-mini">
                        <el-form-item>
                            <div class="el-input--mini el-input-group">
                                <div class="el-input-group__prepend">
                                    {{ContractorViolationAccount.ProcessingOpinion+mark.m}}
                                </div>
                                <el-input class="el-textarea__inner" type="textarea" v-model="Form.cbs_breakrules.processingOpinion"
                                          autocomplete="off"></el-input>
                            </div>
                        </el-form-item>
                    </div>
                </el-col>
                <!--<el-col :span="24">
                    <div class="elst-select-mini">
                        <el-form-item>
                            <div class="el-input--mini el-input-group">
                                <div class="el-input-group__prepend">
                                    {{ContractorViolationAccount.Remarks+mark.m}}
                                </div>
                                <el-input class="el-textarea__inner" type="textarea" v-model="Form.cbs_breakrules.remarks"
                                          autocomplete="off"></el-input>
                            </div>
                        </el-form-item>
                    </div>
                </el-col>-->
                <el-col :span="24">
                    <div class="elst-select-mini">
                        <el-form-item prop="isBackList">
                            <el-input size="mini">
                                <template slot="prepend">
                                    <div> {{ContractorViolationAccount.IsBlacklist+mark.m}}</div>
                                </template>
                                <el-select @visible-change="visibleChange" v-model="Form.cbs_breakrules.isBackList" slot="suffix"
                                           :placeholder="ContractorViolationAccount.IsBlacklist">
                                    <el-option label="请选择" value=""></el-option>
                                    <el-option v-for="item in IsBlacklist" :label="item.value" :value="item.key">
                                    </el-option>
                                </el-select>
                            </el-input>
                            <span class="iputLineMust" v-if="!Form.cbs_breakrules.isBackList">
                                <!--必填项添加-->
                                <img src="/static/images/exclamation.png" alt="">
                            </span>
                        </el-form-item>
                    </div>
                </el-col>
            </el-row>
            <el-row>
                <el-col class="head-tool">
                    <el-upload name="files" class="fl" ref="Attachmentupload" action="/api/File/UploadFile" multiple="true"
                               :before-upload="beforeUpload" :on-success="successUpLoad" :auto-upload="true"
                               :show-file-list="false">
                        <!--<el-button type="primary">{{col.lawUploadAttachment}}</el-button>-->
                        <el-button type="primary">{{"请上传违章图片"}}</el-button>
                    </el-upload>
                </el-col>
            </el-row>
            <el-row>
                <el-col span="24">
                    <el-table stripe :data="Form.cbs_breakrules.cbS_BreakRulesAttachment" style="width: 100%">
                        <el-table-column type="index" :label="col.SequenceNumber" :index="indexMethod" width="50"
                                         show-overflow-tooltip="true"></el-table-column>
                        <el-table-column prop="attachmentName" :label="ContractorDirectory.FileName">
                            <template slot-scope="scope">
                                <el-button type="text" @click="label_click(scope.row.attachmentId)">
                                    {{scope.row.attachmentName}}
                                </el-button>
                            </template>
                        </el-table-column>
                        <el-table-column prop="uploadTime" :label="ContractorDirectory.CreateTime"
                                         show-overflow-tooltip="true">
                        </el-table-column>
                        <el-table-column prop="sysUser.sysUserInfor.name" :label="ContractorDirectory.UploadUser"
                                         show-overflow-tooltip="true">
                        </el-table-column>
                        <el-table-column label="操作">
                            <template slot-scope="scope">
                                <el-button @click.native.prevent="deleteRow(scope.$index, Form.cbs_breakrules.cbS_BreakRulesAttachment)"
                                           type="text" size="small">
                                    移除
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-col>
            </el-row>
            <el-row type="flex" justify="end" style="margin-top:10px">
                <el-form-item>
                    <el-button type="primary" @click="onSaveForm('ruleForm')">{{col.btnSave}}</el-button>
                    <el-button type="primary" @click="onSubmitForm('ruleForm')">{{col.btnCommit}}</el-button>
                    <el-button type="primary" @click="onBack">{{col.btnBack}}</el-button>
                </el-form-item>
            </el-row>
        </el-form>
        <el-dialog title="承包商列表" fullscreen="true" :visible.sync="ListItem.dialogVisible" @close='closeDialog'
            width="80%" height="80%" top="10vh">
            <iframe ref="iframe" :src="ListItem.InputUrl" style="height:95%;width:100%" frameborder="0"></iframe>
        </el-dialog>
    </div>
    <script type="text/javascript">

        var app = new Vue({
            el: '#app',
            data: {
                id: '',
                //业务表单内容
                Form: {
                    cbs_breakrules: {
                        cbsListId: '',
                        AreaID: '',
                        id: guidEmpty,
                        ContractorName: '',
                        violationDate: '',
                        ViolationInstructions: '',
                        Violators: '',
                        ViolatorsID: '',
                        ViolationClause: '',
                        DiscoveringPeople: '',
                        ProcessingOpinion: '',
                        IsBlacklist: '',
                        Remarks: '',
                        DiscoveringPeopleID: '',
                        cbS_BreakRulesApprove: [],
                        cbS_BreakRulesAttachment: [],
                    },
                    sysUser: { id: '', name: '' },
                },
                CBS_List: [],
                CBS_User: [],
                AreaList: [], 
                BreakRulesApproveDict:[],
                IsBlacklist: [],
                ListItem: ListItem,
                YWZGBM: '',    //业务主管部门
                YWZGBMGW: '',  //业务主管部门领导岗位
                SDBM: '',      //属地部门
                SDBMGW:'',     //属地部门领导岗位 
                HSE: '',
                ZJL:'',
                //表单验证
                rules: {
                    'cbs_breakrules.cbsListId': [
                        verification.NotNull
                    ],
                    'cbs_breakrules.violatorsID': [
                        verification.NotNull
                    ],
                    'cbs_breakrules.violationDate': [
                        verification.NotNull
                    ],
                    'cbs_breakrules.discoveringPeopleID': [
                        verification.NotNull
                    ],
                    'cbs_breakrules.areaID': [
                        verification.NotNull
                    ],
                    'cbs_breakrules.violationClause': [
                        verification.NotNull
                    ],
                    'cbs_breakrules.isBackList': [
                        verification.NotNull
                    ]
                }
            },
            methods: {
                //解決edge下select bug
                visibleChange: function (isVisible) {
                    visibleChange(isVisible)
                },
                indexMethod: function (index) {
                    return (this.ListItem.currentPage - 1) * this.ListItem.pagesize + index + 1;
                },
                onBack: function () {
                    parent.app.ListItem.dialogVisible = false;
                },
                label_click: function (id) {
                    var path = downLoadPath(id)
                    location.href = path;
                },
                //移除附件 
                deleteRow: function (index, rows) {
                    rows.splice(index, 1);
                },
                //上传附件文件的校验
                beforeUpload: function (file) {
                    const isJPG = file.type === 'image/jpeg';
                    const isPNG = file.type === 'image/png';
                    const isLt2M = file.size / 1024 / 1024 < 2;
                    if (!isJPG && !isPNG) {
                        this.$message.error('仅可上传 JPG和PNG 格式!');
                    }
                    if (!isLt2M) {
                        this.$message.error('上传图片大小不能超过 2MB!');
                    }
                    return (isJPG || isPNG) && isLt2M;
                },
                //上传成功后执行
                successUpLoad: function (res, file) {
                    var data = res.data;//成功后的业务数据
                    var fileModel = data[0];//第一个文件对象
                    var d = new Date();
                    this.Form.cbs_breakrules.cbS_BreakRulesAttachment.push({
                        attachmentId: fileModel.id,
                        attachmentName: file.name,
                        breakRulesId: this.id,
                        uploadTime: new Date(d.setHours(d.getHours() + 8)).toJSON().substr(0, 19).replace('T', ' '),
                        uploadUser: this.Form.sysUser.id,
                        sysUser: {
                            sysUserInfor: { name: this.Form.sysUser.name, }
                        }
                    });
                    console.log('h1', this.Form.sysUser);
                },
                //暂存数据
                onSaveForm: function (formName) {
                    var mythis = this;
                    this.$refs[formName].validate(function (valid) {
                        //验证通过
                        if (valid) {
                            for (var i = 0; i < mythis.Form.cbs_breakrules.cbS_BreakRulesAttachment.length; i++) {
                                mythis.Form.cbs_breakrules.cbS_BreakRulesAttachment[i].sysUser = null;
                            }
                            mythis.Form.cbs_breakrules.state = '1';
                            onSubmitForm(this, '/api/CBS_BreakRules/Save', mythis.Form.cbs_breakrules);
                        } else {
                            //验证失败
                            return false;
                        }
                    });
                },
                //提交数据
                onSubmitForm: function (formName) {
                    var mythis = this;
                    this.$refs[formName].validate(function (valid) {
                        //验证通过
                        if (valid) {
                            for (var i = 0; i < mythis.Form.cbs_breakrules.cbS_BreakRulesAttachment.length; i++) {
                                mythis.Form.cbs_breakrules.cbS_BreakRulesAttachment[i].sysUser = null;
                            }
                            for (var j = 0; j < mythis.Form.cbs_breakrules.cbS_BreakRulesApprove.length; j++) {
                                mythis.Form.cbs_breakrules.cbS_BreakRulesApprove.splice(j, 1);
                            }

                            //通过承包商ID获取业务主管部门
                            if (mythis.Form.cbs_breakrules.cbsListId != null && mythis.Form.cbs_breakrules.cbsListId != '') {
                                myAjax("get", mythis, '/api/CBS_List/get?id=' + mythis.Form.cbs_breakrules.cbsListId, null, function (response) {
                                    var ajaxModel = response.data;
                                    mythis.YWZGBM = ajaxModel.cbs_list.manageDept;
                                    console.log('a1', mythis.YWZGBM);
                                }, false);
                            }

                            //业务主管部门领导岗位  
                            myAjax("post", this, '/api/SysDuty/GetListByDept', { model: { SysDepartmentID: mythis.YWZGBM, CreateFactory: null, IsLeader:'1' }, offset: 0, limit: 100 }, function (response) {
                                var ajaxModel = response.data.pageData;
                                console.log('a2', ajaxModel);
                                if (ajaxModel.length > 0) {
                                    mythis.YWZGBMGW = ajaxModel[0].id;
                                }
                            }, false);

                            //通过区域ID获取区域领导岗位
                            if (mythis.Form.cbs_breakrules.areaID != null && mythis.Form.cbs_breakrules.areaID != '') {
                                myAjax("get", mythis, '/api/SysArea/get?id=' + mythis.Form.cbs_breakrules.areaID, null, function (response) {
                                    var ajaxModel = response.data;
                                    mythis.SDBMGW = ajaxModel.leadDutyID;
                                }, false);
                            }

                            mythis.Form.cbs_breakrules.state = '2';
                            mythis.Form.cbs_breakrules.cbS_BreakRulesApprove.push({
                                breakRulesId: this.id,
                                examinUserType: '01',
                                examineOrder: 1,
                                ExamineState: '0',
                            });
                            mythis.Form.cbs_breakrules.cbS_BreakRulesApprove.push({
                                breakRulesId: this.id,
                                examineDuty: mythis.YWZGBMGW,
                                examinUserType: '02',
                                examineOrder: 2,
                                ExamineState: '0',
                            });
                            mythis.Form.cbs_breakrules.cbS_BreakRulesApprove.push({
                                breakRulesId: this.id,
                                examineDuty: mythis.SDBMGW,
                                examinUserType: '03',
                                examineOrder: 2,
                                ExamineState: '0',
                            });
                            mythis.Form.cbs_breakrules.cbS_BreakRulesApprove.push({
                                breakRulesId: this.id,
                                examineDuty: mythis.HSE,
                                examinUserType: '04',
                                examineOrder: 2,
                                ExamineState: '0',
                            });
                            if (mythis.Form.cbs_breakrules.isBackList == '2') {
                                mythis.Form.cbs_breakrules.cbS_BreakRulesApprove.push({
                                    breakRulesId: this.id,
                                    examineDuty: mythis.ZJL,
                                    examinUserType: '05',
                                    examineOrder: 3,
                                    ExamineState: '0',
                                });
                            }
                            onSubmitForm(this, '/api/CBS_BreakRules/Save', mythis.Form.cbs_breakrules);
                            //保存审批信息

                        } else {
                            //验证失败
                            return false;
                        }
                    });
                },
                getData: function () {
                    getData(this, '/api/CBS_BreakRules/get?id=' + this.id);
                },

                ContractorInput: function (val, id) { DialogShow(this, val, "ContractorDirectoryList.html", id); },
                //初始化承包商下拉框
                getCBS_List: function () {
                    var mythis = this;
                    myAjax("post", this, '/api/CBS_List/GetList', { model: { status: '01', IsBack: false, CreateFactory: null }, offset: 0, limit: 100 }, function (response) {
                        mythis.CBS_List = response.data.pageData;
                    }, false);
                },
                GetAreaList: function (type) {
                    var mythis = this;
                    myAjax("post", this, '/api/SysArea/GetList', { model: { Name: '', Code: '', SubFactory: null }, offset: 0, limit: 999 }
                        , function (response) {
                            mythis.AreaList = menuHelper(response.data.pageData, guidEmpty);
                            console.log('oooooo', mythis.AreaList);
                        },
                        false);
                },
                changeCBSListId: function (CBSListId) {
                    var mythis = this;
                    if (CBSListId == null || CBSListId == "" || CBSListId == undefined) { } else {
                        myAjax("post", mythis, '/api/CBS_User/GetList', {
                            model: { CBSListId: CBSListId }, offset: 0, limit: 100
                        }, function (response) {
                            mythis.CBS_User = response.data.pageData;
                        });
                    }
                },
                GetApprove: function () {
                    var mythis = this;
                    myAjax("post", this, '/api/CBS_BreakRulesApproveDict/GetList', { model: { CreateFactory: null }, offset: 0, limit: 100 }
                        , function (response) {
                            mythis.HSE = '';
                            mythis.ZJL = '';
                            if (response.data.pageData.length == 0) {
                                mythis.BreakRulesApproveDict = [];
                            } else {
                                mythis.BreakRulesApproveDict = response.data.pageData;
                                for (var i = 0; i < mythis.BreakRulesApproveDict.length; i++) {
                                    if (mythis.BreakRulesApproveDict[i].dutyType == '04') {
                                        mythis.HSE = mythis.BreakRulesApproveDict[i].examineDuty;
                                    }
                                    if (mythis.BreakRulesApproveDict[i].dutyType == '05') {
                                        mythis.ZJL = mythis.BreakRulesApproveDict[i].examineDuty;
                                    }
                                }
                            }                            
                        });
                },
                postChange: function (val) {
                    //根据承包商，筛选违规人
                    this.changeCBSListId(val);
                }
            },
            mounted: function () {
                this.getCBS_List();//承包商
                this.GetAreaList();//初始化区域
                this.IsBlacklist = getDicData('9021'); //黑名单
                this.id = getUrlParam("id");
                this.getData();
                this.changeCBSListId(this.Form.cbs_breakrules.cbsListId);  //获取承包商人员信息
                this.GetApprove();  //获取审批信息
            }
        });
        //数据序列化(tabletree)
        function menuHelper(list, pid) {
            var result = [];
            if (list.length <= 0)
                return list;
            list.forEach(function (v, i) {
                var temp = {};
                for (var key in v) {
                    temp[key] = v[key];
                }
                temp.label = v.name;
                temp.parentId = temp.parentId ? temp.parentId : guidEmpty;
                var obj;
                if (temp.parentId == pid) {
                    obj = temp;
                    var nextObj = menuHelper(list, temp.id);
                    if (nextObj.length > 0) {
                        obj.children = nextObj;
                    }
                }
                if (obj)
                    result.push(obj)
            })
            return result;
        }
    </script>
</body>
</html>